<template>
    <my-layout>
       <template  v-slot:header>
             <el-input  v-model="query.name" placeholder="输入用户名字查询" size='small' style="width: 200px"/>
             <el-button type="primary" size='small' @click="searchEve">查询</el-button>
             <el-button type="success" size='small'>新增</el-button>
        </template>
            <el-table
                :data="userList"
                style="width: 100%"
                size='small'
                height='100%'>
                <el-table-column prop="name" label="姓名" width="180" fixed='left' align='center'></el-table-column>
                <el-table-column prop="state" label="状态" width="180" fixed='left' align='center'>
                    <template v-slot='data'>
                      <div :class="data.row.state ? 'dong' : 'jihuo'">
                        {{data.row.state | changeState()}}
                      </div>
                    </template>
                </el-table-column>
                <el-table-column prop="birthday" label="生日" width="200" align='center'/>
                <el-table-column prop="dept" label="部门" width="180" align='center'/>
                <el-table-column prop="email" label="邮箱" width="300" align='center'/>
                <el-table-column prop="id" label="ID" width="180" align='center'/>
                <el-table-column prop="position" label="职位" width="300" :show-overflow-tooltip='true' align='center'/>
                <el-table-column  label="操作" width="180" fixed='right' align='center'>
                  <template slot-scope="{row}">
                    <el-button type="text" size="small">编辑</el-button>
                    <el-popconfirm @confirm="(row.state === 0 ? userAdd(row.id, 1) : userDel(row.id))" :title="'确定要' + (row.state === 1 ? '冻结' : '激活') + '【' + row.name + '】这个用户么'">
                      <template #reference>
                        <el-button type="text" size="small" v-if="row.state === 1" style='margin:0 6px;'>冻结</el-button>
                        <el-button type="text" size="small" v-else style='margin:0 6px'>激活</el-button>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
            </el-table>
        <template v-slot:footer>
            <el-pagination
                class="user-footer"
                :page-sizes="[20,50,100,150]"
                :page-size="query.size"
                small
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :current-page='query.page'
                @size-change='sizeChange'
                @current-change='currentChange'>
            </el-pagination>
          </template>
   </my-layout>
</template>
<script>
import {getUserListApi, userAddApi, userDelApi} from '@/apis/userApi'
    export default {
        data() {
            return {
                query:{
                page:1,
                size:20,
                name:''
                },
                total: null,
                userList: [],
            }
        },
        mounted(){
            this.getUserList()
        },
        filters: {
                changeState(val){
                    if(val === 1) {
                        return '激活中'
                    }
                    else {
                        return '冻结中'
                    }
                }
            },
        methods: {
            getUserList(){
                getUserListApi(this.query).then(d => {
                        if(d.code === 200) {
                        this.total = d.data.count
                        this.userList = d.data.rows
                        }
                    }) 
                },
            sizeChange(size){
                this.query.size = size
                this.getUserList()
            },
            currentChange(page){
                this.query.page = page
                this.getUserList()
            },
            searchEve(){
                this.query.page = 1
                this.getUserList()
            },
            userAdd(id,type){
                userAddApi({id,state: type}).then(data => {
                    if(data.code === 200) {
                        this.$message({
                            message: `激活用户成功！`,
                            type: 'success'
                        })
                        this.getUserList()
                    }
                })
            },
            userDel(id){
                userDelApi(id).then(d => {
                    if(d.code === 200) {
                        this.$message({
                            message: `冻结用户成功！`,
                            type: 'success'
                        })
                        this.getUserList()
                    }
                })
            }
        },
    }
</script>
<style lang="less" scoped>
    .el-input {
        margin-right: .5rem;
    }
    .dong {
        color: #e97ceb;
    }
    .jihuo {
        color: #5dc4f5;
    }
</style>